<!-- 滑动验证 -->
<template>
  <div class="drag" ref="dragDiv">
    <div class="drag_bg"></div>
    <div class="drag_text" :class="{drag_text_succ: confirmSuccess}">
      {{ confirmWords }}
    </div>
    <div
      ref="moveDiv"
      @mousedown="mousedownFn($event)"
      :class="{handler_ok_bg: confirmSuccess}"
      class="handler handler_bg"
      style="position: absolute; top: 0; left: 0;"
    ></div>
  </div>
</template>

<script>
import { createDragBox } from '@const/api_staffCenter.js';
export default {
  name: 'drag',
  props: {
    index: {
      type: Number,
      default: () => 1
    }
  },
  data() {
    return {
      tabIndex: '',
      beginClientX: 0 /*距离屏幕左端距离*/,
      mouseMoveStata: false /*触发拖动状态  判断*/,
      maxwidth: 274 /*拖动最大宽度，依据滑块宽度算出来的*/,
      confirmWords: '按住滑块滑动，拖到最右边' /*滑块文字*/,
      confirmSuccess: false /*验证成功判断*/,
      moveStart: 0,
      moveComplete: 0
    };
  },
  methods: {
    setIndex(index) {
      console.log('35', index);
      this.tabIndex = index;
    },
    mousedownFn: function(e) {
      this.moveStart = new Date().getTime();
      if (!this.confirmSuccess) {
        e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件
        this.mouseMoveStata = true;
        this.beginClientX = e.clientX;
      }
    },
    successFunction() {
      console.log('48succ', 'succ');
      this.$emit('dragStatus', true);
      this.confirmSuccess = true;
      this.confirmWords = '验证通过';
      if (window.addEventListener) {
        this.$el.removeEventListener('mousemove', this.mouseMoveFn);
        this.$el.removeEventListener('mousemove', this.moseUpFn);
      } else {
        this.$el.removeEventListener.removeEventListener('mouseup', () => {});
      }
      this.$el.getElementsByClassName('drag_text')[0].style.color = '#fff';
      this.$el.getElementsByClassName('handler')[0].style.left =
        this.maxwidth + 'px';
      this.$el.getElementsByClassName('drag_bg')[0].style.width =
        this.maxwidth + 'px';
      this.moveComplete = new Date().getTime();
      this.getSuccessRandomCode();
    }, //验证成功函数
    // 滑块成功获取随机码
    getSuccessRandomCode() {
      let millisecond = this.moveComplete - this.moveStart;
      this.$store.commit('moveTime', millisecond);
      let randomCode = this.$store.state.randomCode;
      let source = 'm_pc_web';
      let timestamp = new Date().getTime();
      this.$axios({
        url: createDragBox,
        method: 'post',
        data: {
          millisecond: millisecond,
          source: source,
          randomCode: randomCode,
          timestamp: timestamp
        }
      })
        .then(res => {
          this.$store.commit('randomCode', res.data.payload);
          console.log('========randomCode0:', this.$store.state.randomCode);
        })
        .catch(err => {
          reject(err);
        });
    },
    mouseMoveFn(e) {
      if (this.mouseMoveStata) {
        let width = e.clientX - this.beginClientX;
        if (width > 0 && width <= this.maxwidth) {
          this.$el.getElementsByClassName('handler')[0].style.left =
            width + 'px';
          this.$el.getElementsByClassName('drag_bg')[0].style.width =
            width + 'px';
        } else if (width > this.maxwidth) {
          this.successFunction();
        }
      }
    }, //mousemove事件
    moseUpFn(e) {
      this.mouseMoveStata = false;
      var width = e.clientX - this.beginClientX;
      if (width < this.maxwidth && this.confirmSuccess === false) {
        this.$el.getElementsByClassName('handler')[0].style.left = 0 + 'px';
        this.$el.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px';
      }
    }, //mouseup事件
    reset() {
      this.confirmSuccess = false;
      this.mouseMoveStata = false;
      this.confirmWords = '请按住滑块拖到最右边';
      this.$el.addEventListener('mousemove', this.mouseMoveFn);
      this.$el.addEventListener('mouseup', this.moseUpFn);
      this.$el.getElementsByClassName('drag_text')[0].style.color = '#fff';
      this.$el.getElementsByClassName('handler')[0].style.left = 0 + 'px';
      this.$el.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px';
    }
  },
  mounted() {
    this.$el.addEventListener('mousemove', this.mouseMoveFn);
    this.$el.addEventListener('mouseup', this.moseUpFn);
    // this.getRandomCode()
  }
};
</script>

<style scoped>
.drag {
  position: relative;
  background-color: #e8e8e8;
  width: 100%;
  height: 48px;
  line-height: 48px;
  text-align: center;
}
.handler {
  width: 56px;
  height: 46px;
  border: 1px solid #ccc;
  cursor: move;
}
.handler_bg {
  background: #fff
    url('')
    no-repeat center;
}
.handler_ok_bg {
  background: #fff
    url('')
    no-repeat center;
}
.drag_bg {
  background-color: #7ac23c;
  height: 48px;
  width: 0;
}
.drag_text {
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  margin: 0 auto;
  background-color: #666;

  /* 文字的颜色必须有透明度，否则展示不出效果 */
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 65%
  );

  /* 文字遮罩，浏览器支持不是很好 */

  /* -webkit-background-clip: text; */
  background-size: 60% 160%;

  /* 控制背景光束的大小 */
  background-repeat: no-repeat;

  /* 背景是否重复 */
  background-position: -100% 0;

  /* 背景光束的起始位置 */
  animation: mymoves 2.6s infinite ease-in-out;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 背景光束从左到右的动画 */
}

.drag_text_succ {
  background-color: #fff;
}

@keyframes mymoves {
  0% {
    background-position-x: -100%;
  }
  100% {
    background-position-x: 200%;
  }
}
</style>
